<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
	  .red{
	    color: red;
	  }
	  .blue{
	    color:blue;
	  }
	  .box{
	    height: 100px;
	    width: 100px;
	    background: red;
	  }

    </style>
    <script type="text/javascript">
        $(function(){
        	//创建json,Vue对象来创建
			var c=new Vue({
				el:'#box',//el属性,指定元素,选择器,任何选择器都可以
				data:{   //data属性,绑定数据
				  msg: '你好vue',
			      title:'我是一个title',
			      url:'https://www.itying.com/themes/itying/images/logo.gif',
			      h:'<h2>我是h2</h2>',
			      list:['1111','2222','3333'],
			      flag:false,
			      boxWdith:500,
			      todo:"",
			      todoList:[],
			      todoList2:[]
				},
				//生命周期函数       vue页面刷新就会触发的方法,类似于jquery中的$(function(){})
				created(){
					console.log("created");
					$.ajax({
	          			//请求的服务器地址
	          			url:"http://localhost:8701/test/test",
	          			//是否异步,默认为true,默认异步请求
	          			async:true,
	          			//向服务器发送的请求参数,这里是分页参数,是一个json格式的数据
	          			data:{
	          				"userName":"张三",
	          				"password":"123456"
	          			},
	          			//请求方式,有两个值,post和get,默认为get请求
	          			type:"POST",
	          			//请求发送之前浏览器可以做的事情,一般是用来做表单校验.返回一个布尔值,如果返回true,则发送请求.如果返回false,不发送请求,直接返回
	          			beforeSend:function(){
	          				return true;
	          			},
	          			//服务器响应成功,浏览器要做的事情,一般在这里做数据处理.服务器返回的所有数据,一般都是json数据,都封装在result这个参数中
	          			success:function(result){
	          				//$('#editModal').modal('show');//展示模态框
	          				var r=JSON.parse(result);
	          				console.log(r);
	          			}
	                 })
                },
                mounted(){
                   console.log("mounted");
                 },
				methods:{
                   add(){
                      alert("ok");
                  }
                  
             }
		})
        })
    </script>
    
</head>
<body>  
    <div id="box">
        <div>{{msg}}</div>
        <div>
           <!-- 绑定属性 -->
           <img v-bind:src="url" />
        </div>
        <div>
           <!-- 绑定html -->
           <div v-html="h">
    	
           </div>
        </div>
        <div>
           <div v-bind:class="{'red':flag}">
	                     我是一个div
	       </div>
		   <div :class="{'red':flag,'blue':!flag}">
		             我是另一个div
		   </div>
	        <!-- v-bind:style  :style的使用 -->
	       <div class="box" v-bind:style="{'width':boxWdith+'px'}">
	                       我是另一个div
	       </div>
        </div>
        <!-- v-for -->
        <div>
           <ul>
	        <li v-for="(item,key) in list">
	          {{key}}---{{item}}
	        </li>
	      </ul>
	      <br>
	      <ul>
	        <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
	          {{key}}---{{item}}
	        </li>
	      </ul>
        </div>
        <div>
           <input type="button" value="添加"  v-on:click="add()">
        </div>
        <script>
	    <!--html+json-->
		
			
	
       </script>
  </div>
</body>
</html>



















